﻿<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .top {
            width: 1500px;
            margin: 0 auto;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
        }

        #Q-nav {
            width: 1500px;
            margin: 0 auto;
            overflow: hidden;
        }
    </style>

</head>

<body>

    <!--第一张图片-->
    <div class="top" id="top">
        <img src="images/top.png" alt="" />
    </div>
    <!--第二张图片-->
    <div id="Q-nav">
        <img src="images/nav.png" alt="" />
    </div>
    <!--第三张图片-->
    <div class="main" id="main">
        <img src="images/main.png" alt="" />
    </div>
    <script src="../../js/jquery.min.js"></script>

    <script>
        console.log($('#Q-nav').offset().top)
        $(window).on('scroll', function () {
            if ($(document).scrollTop() >= 168) {
                $('#Q-nav').css({
                    position: 'fixed',
                    top: 0
                })
            } else {
                console.log(1)
                $('#Q-nav').css({
                    position: ''
                })
            }
        })

    </script>

</body>

</html>